<template >
    <div>
    <div class="item">
        <div class="p1 s1"></div>
        <div class="">
            <div class="p1 s2"></div>
        </div>
    </div>
    <div class="m1">
        <div class="p1"></div>
    </div>
    </div>

</template>
<script>
    export default{
        data(){
            return {};
        },
        methods:{}
    }
</script>
<style scoped>
.item{
    position: relative;
    height: 100px;
}
.p1{
    position: absolute ;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    background: red;
}
.s1{
    left: 100px;
}
.s2{
    left: 50%;
    margin-left: -50px;
}
.m1{
    display: flex;
    justify-content: center;
    height: 100px;
}
</style>